<template>
  <a-modal
    :title="title"
    :visible="isShow"
    @ok="handleSubmit"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
    width="40%"
    :destroyOnClose="true"
  >
    <a-form :form="form">
      <a-form-item
        label="角色名称："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'name',
            { rules: [{ required: true, message: '请输入角色名称' }] }
          ]"
          placeholder="请输入角色名称"
        />
      </a-form-item>
      <a-form-item
        label="角色描述："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-textarea
          :rows="4"
          v-decorator="[
            'remark',
            { rules: [{ required: true, message: '请输入角色描述!' }] }
          ]"
          placeholder="请输入角色描述"
        />
      </a-form-item>
      <a-form-item
        label="角色状态："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-radio-group
          name="radioGroup"
          :disabled="isDisabled"
          v-decorator="[
            'status',
            { rules: [{ required: true, message: '请选择角色状态' }] }
          ]"
        >
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="选择资源："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input-search
          allowClear
          placeholder="请输入表名检索"
          style="width: 300px;"
          v-model="getPars.tableEname"
          @search="onSelectType"
        />
      </a-form-item>
      <a-table
        style="overflow-x: scroll;margin-top:20px;width: 500px;margin: 0 auto;"
        :columns="listObject.columns"
        :dataSource="listObject.list"
        :loading="listObject.loading"
        :pagination="pagination"
        rowKey="id"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: record => ({
            props: {
              // 全部默认禁止选中
              disabled: isDisabled,
              // 某几项默认禁止选中(R: 当state等于1时)
             // disabled: record.state === 1 // 某几项默认选中(R: 当state等于1时) // defaultChecked: record.state == 1,
            }
          })
        }"
        @change="handleTableChange"
      >
        <span slot="order" slot-scope="text, record, index">
          <em>{{ index + 1 }}</em>
        </span>
      </a-table>
    </a-form>
    <div v-if="status === 'detail'" slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>
<script>
import { page } from "@/api";
import moment from "moment";
import { getUser } from "@/libs/util";
export default {
  // props: ['show', 'disposeIds'],
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      isShow: false,
      addTime: "",
      personId: "",
      status: "",
      isDisabled: false,
      listObject: {
        loading: false,
        list: [],
        columns: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 50,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "表名",
            dataIndex: "tableEname",
            scopedSlots: { customRender: "tableEname" },
            align: "center"
          },
          {
            title: "表名中文名",
            dataIndex: "tableCname",
            scopedSlots: { customRender: "tableCname" },
            align: "center"
          }
        ]
      },
      pagination: {
        current: 1,
        pageSize: 20
      },
      getPars: {
        currentPage: 1,
        pageSize: 5
        // sorter: "differDay_descend"
      },
      selectedRowKeys: [],
      title: ""
    };
  },
  mounted() {},
  methods: {
    onSelectType() {
      this.getPars.currentPage = 1;
      this.getList();
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = [];
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination, filters, sorter) {
      this.getPars.currentPage = pagination.current;
      this.getList();
    },
    getList() {
      this.listObject.loading = true;
      page.getSourceTableList(this.getPars).then(res => {
        let { current, size, total } = res.data.data;
        this.listObject.list = res.data.data.records;
        this.listObject.loading = false;
        this.setPagination(current, size, total);
      });
    },
    setPagination(current, size, total) {
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showQuickJumper: true,
        showTotal: total => `共${total}条记录`
      };
    },
    show(status, record) {
      confirmLoading: false;
      this.isShow = true;
      this.init();
      this.getList();
      let _this = this;
      if (status === "add") {
        // 新增角色
        this.status = "add";
        this.personId = "";
        this.title = "新增角色";
        this.isDisabled = false;
      } else {
        this.personId = record.id;
        page.getById({ id: this.personId }).then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            // debugger;
            this.form.setFieldsValue({
              name: res.data.data.name,
              remark: res.data.data.remark,
              status: res.data.data.status
            });
            let dataStrArr = res.data.data.sources.split(",");
            _this.selectedRowKeys = dataStrArr.map(function(data) {
              return +data;
            });
            // this.selectedRowKeys = [1,2]
            // debugger;
          }
        });
        if (status === "detail") {
          this.status = "detail";
          this.title = "查看角色";
          this.isDisabled = true;
        }
        if (status === "edit") {
          // 编辑
          this.status = "edit";
          this.title = "编辑角色";
          this.isDisabled = false;
        }
      }
    },
    init() {
      this.selectedRowKeys = [];
      this.listObject.list = [];
      this.pagination.current = 1;
      this.getPars.currentPage = 1;
    },
    handleCancel() {
      this.isShow = false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.selectedRowKeys.length <= 0) {
            this.$message.warning("请选择资源列表！");
            return;
          }
          this.confirmLoading = true;
          if (this.status === "add") {
            //添加
            let params = Object.assign(values, {
              id: this.personId,
              sources: this.selectedRowKeys.toString()
            });
            page
              .addRole(params)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                } else {
                  this.isShow = false;
                  this.$emit("addSuccess");
                  this.$message.success("添加角色成功");
                }
                this.confirmLoading = false;
              })
              .catch(() => {
                this.isShow = false;
                this.confirmLoading = false;
                this.$message.warning("添加角色失败");
              });
          }
          if (this.status === "edit") {
            //更新
            let params = Object.assign(values, {
              id: this.personId,
              sources: this.selectedRowKeys.toString()
            });
            page
              .updateRole(params)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                } else {
                  this.isShow = false;
                  this.confirmLoading = false;
                  this.$emit("updateSuccess");
                  this.$message.success("更新成功");
                }
              })
              .catch(() => {
                this.isShow = false;
                this.confirmLoading = false;
                this.$message.warning("更新失败");
              });
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
/deep/.ant-pagination-options {
  margin-top: 10px;
}
</style>
